<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="UTF-8">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
	 <link rel='stylesheet' th:href="@{/static/css/bootstrap-combined.min.css}">
	 <link rel='stylesheet' id='icon_stylesheet' href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
	 
	 <style>[class*="foundicon-"] {font-family: GeneralFoundicons;font-style: normal;}</style>
	 
	 
</head>
<body>
<div class="layui-form" style="padding: 20px 30px 0 0;">
	 <div class='row'>
		  <div class='span8 col-md-8 columns eight large-8'>
				<!-- 编辑器 -->
				<div id='editor'></div>
		  </div>
		  <div class='span4 col-md-4 columns four large-4'>
				<h2>JSON数据</h2>
				<!--<p>可直接修改json数据值，然后点击更新按钮，进行form更新 <button class='btn btn-primary' id='setvalue'>Update Form</button></p>-->
				<textarea id='output' style='width: 100%; height: 300px; font-family: monospace;' class='form-control'></textarea>
				
				<h2>Validation</h2>
				<p>当且单中有错误时，此处显示错误信息</p>
				<textarea id='validate' style='width: 100%; height: 100px; font-family: monospace;' readonly disabled class='form-control'></textarea>
		  </div>
		  <!--<div class="row hide">-->
				<!--<textarea id='schema' th:text="${editInfo.templateData}" style='width: 100%; height: 450px; font-family: monospace;' class='form-control'></textarea>-->
		  <!--</div>-->
		  <div class='row hide'>
				<div class='span12 col-md-12 columns twelve large-12'>
					 <h2>Schema</h2>
					 <p>通过如下schema生成表单，修改后，点击更新按钮刷新表单<button class='btn btn-primary' id='setschema'>更新 Schema</button></p>
					 
					 <textarea id='schema'  th:text="${editInfo.templateData}" style='width: 100%; height: 450px; font-family: monospace;' class='form-control'></textarea>
				</div>
		  </div>
	 
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/js/jsoneditor.min.js}"></script>

<script>
(function() {
    var schema;
	 // Divs/textareas on the page
	 var $schema = document.getElementById('schema');
	 var $output = document.getElementById('output');
	 var $editor = document.getElementById('editor');
	 var $validate = document.getElementById('validate');

	 var jsoneditor;
	 
	 //格式化一下模板
    schema = JSON.parse($("#schema").text());
	 //加载json schema，渲染表单
	 var reload = function(keep_value) {
		  // console.log("reload.keep_value" + keep_value);
		  // var startval = (jsoneditor && keep_value)? jsoneditor.getValue() : window.startval;
		  // window.startval = undefined;

		  //如果存在，先销毁
		  if(jsoneditor) jsoneditor.destroy();
		  //初始化jsoneditor
		  jsoneditor = new JSONEditor($editor,{
            schema: schema
				//, startval: startval
		  });
		  window.jsoneditor = jsoneditor;

		  // 当编辑器的值更改时，更新JSON输出和验证消息
		  jsoneditor.on('change',function() {
				console.log("jsoneditor.change.....");
				var json = jsoneditor.getValue();

				$("#output").text(JSON.stringify(json,null,2));

				//验证json
				var validation_errors = jsoneditor.validate();
				// 如果存在错误，显示出错误信息。
				if(validation_errors.length) {
				    $("#validate").text(JSON.stringify(validation_errors,null,2));
				}
				else {
                $("#validate").text("通过");
				}
		  });
	 };

    $("#output").text('');

	 // 设置样式
	 var setTheme = function(theme,no_reload) {
		  JSONEditor.defaults.options.theme = 'bootstrap2';
		  if(!no_reload) reload(true);
	 };

	 // 设置图标样式
	 var setIconlib = function(iconlib,no_reload) {
		  JSONEditor.defaults.options.iconlib = 'fontawesome4';
		  if(!no_reload) reload(true);
	 };

	 // Set options from direct link
	 setTheme('bootstrap2', true);

	 setIconlib('fontawesome4', true);

	 JSONEditor.defaults.options.object_layout = 'normal';

	 JSONEditor.defaults.options.show_errors = 'interaction';

	 reload();
})();
</script>


<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://cdn.bootcdn.net/ajax/libs/analytics.js/2.9.1/analytics.js','ga');

    ga('create', 'UA-17940230-1', 'jeremydorn.com');
    ga('send', 'pageview');
</script>
</body>
</html>